<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城列表</title>
    <link rel="stylesheet" href="css/conmon.css">
    <link rel="stylesheet" href="./css/product-list.css">

    <!-- js插件 -->
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./js/product-list.js"></script>
</head>
<body>
    
    <!-- 头部 -->
    <header class=" cf">
        <div class="bg container-full  cf">
            <div class="container one cf">
                <a class="lf lol" href="#">legochina.cn</a>
                <p class="rf">
                    欢迎光临<a href="index.html">乐购</a>,请登录/ <a href="register.html">注册</a>
                </p>
                <img src="./imgs/logo.jpg" alt="">
            </div>
        </div>

        <!-- 搜索框 -->
        <div class="container ">
            <!-- 购物车 -->
            <div class="car rf">
                <a href="#">购物车 3</a>
                <a href="shopping-cart.html">我的订单</a>
            </div>

            <!-- 搜索框 -->
            <div class="search-box rf ">

                <input type="text" placeholder="创意文具">
                <input type="submit" value="">
            </div>
        </div>

        <!-- 文字导航 -->
        <nav class="navtext container cf">
            <ul class="cf">
                <li>
                    <a href="#">图书</a>
                </li>
                <li><a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">原创文字</a></li>
                <li>
                    <a href="#">服装</a></li>
                <li>
                    <a href="#">运动户外</a></li>
                <li>
                    <a href="#">儿童装</a></li>
                <li>
                    <a href="#">家居</a></li>
                <li>
                    <a href="#">创意文具</a></li>
                <li>
                    <a href="#">地方特产</a></li>
                <li>
                    <a href="#">海外购</a>
                </li>
                <li>
                    <a href="#">电器城</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>

        <!-- 猜你喜欢 -->
        <section class=" container guess cf">
                <div class="cf">
                    <p class="lf"> <span>猜</span>你喜欢 </p>
                    <a href="#" class="rf change">换一批</a>
                </div>
                <div class="container theme-bg-theme"></div>
             <div class="box-div">
                <div class="car">
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <!-- 第二部分 -->
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$50</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <!-- 第三部分 -->
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$51</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$51</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                </div>
             </div>
        </section>

        <!-- 独家提供 -->
        <section class=" container cms">
            <div class="cf ">
                <p class="lf"> <span>独</span>家提供 </p>
            </div>
            <div class="container theme-bg-theme"></div>

            <div id="box-div">
                <div class="car">
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <!-- 第二部分 -->
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$50</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <!-- 第三部分 -->
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$51</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                    <ul class="cf guess-ul">
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$51</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                        <li class="lf">
                            <img src="./imgs/pdemo.jpg" alt="">
                            <p>查理 史密斯</p>
                            <p>中国邮电出版社</p>
                            <p>$49</p>
                        </li>
                    </ul>
                </div>
             </div>     
        </section>
    </main>
    <footer>
        <div class="container-full footer-div">
           <ul class="container four-picture cf">
               <li class="lf"></li>
               <li class="lf"></li>
               <li class="lf"></li>
               <li class="lf"></li>
           </ul>
        </div>

        <div class="container footer-last cf">
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <img src="./imgs/logo_00.png" class="rf">
        </div>
        <div class="last container">
                <p>公司简介 | &emsp;  公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp;  </p>
                <p>cop 乐购网2004-2016</p>
        </div>
    </footer>
        
</body>
</html>